import { useQuery } from '@tanstack/react-query';
import { Form } from 'antd';
import { useCallback, useEffect, useState } from 'react';

import api from '@/apis/api';
import RandomNumberGenerator from '@/components/RandomNumberGen';

import BackupKeyModal from './components/BackupKeyModal';
import KeyButtons from './components/keyButtons';
import KeyCreateModal from './components/KeyCreateModal';
import KeyImportModal from './components/KeyImportModal';
import KeyTable from './components/keyTable';
import SearchForm from './components/searchForm';
import styles from './styles.module.less';

interface TableData {
  index: number;
  keyType: string;
  length: number;
  state: string;
}

const KeyManagement: React.FC = () => {
  const [form] = Form.useForm();
  // 备份|恢复密钥弹窗、标题
  const [backupVisible, setBackupVisible] = useState(false);
  const [backupModalTitle, setbackupModalTitle] = useState<string>('');
  // 密钥创建弹窗
  const [keyCreateVisible, setKeyCreateVisible] = useState(false);
  // 密钥导入弹窗
  const [keyImportVisible, setKeyImportVisible] = useState(false);
  // 生成随机数弹窗
  const [genRandomNumberVisible, setGenRandomNumberVisible] = useState(false);
  // 密钥类型选择(搜索)
  const [keyType, setkeyType] = useState<number>(0);

  // 记录总数
  const [total, setTotal] = useState<number>(0);
  // 记录页码
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(5);

  const [keyTable, setKeyTable] = useState<TableData[]>([
    // {
    //   index: 1,
    //   keyType: 'SM2签名密钥',
    //   length: 256,
    //   state: '就绪',
    // },
    // {
    //   index: 2,
    //   keyType: 'SM2加密密钥',
    //   length: 256,
    //   state: '就绪',
    // },
    // {
    //   index: 3,
    //   keyType: 'RSA签名密钥',
    //   length: 2048,
    //   state: '就绪',
    // },
    // {
    //   index: 4,
    //   keyType: 'RSA加密密钥',
    //   length: 2048,
    //   state: '就绪',
    // },
  ]);

  const { data: keyManageData } = useQuery({
    queryKey: ['getKeyManageData', { keyType, page, pageSize }],
    queryFn: async () => {
      const res: any = await api.GetKeyManageData({
        key_type: keyType,
        skip: (page - 1) * pageSize,
        take: pageSize,
      });
      return res.data;
    },
  });

  useEffect(() => {
    if (keyManageData) {
      const type = keyManageData?.type;
      const data = keyManageData?.items.map((item: any) => {
        const state = item.bits > 0 ? '就绪' : '空闲';
        return {
          index: item.key_index,
          keyType: type,
          length: item.bits,
          state: state,
        };
      });
      setTotal(keyManageData.total);
      setKeyTable(data);
    }
  }, [total, keyManageData]);

  const onSearch = useCallback(() => {
    const keyType = form.getFieldValue('keyType');
    setkeyType(keyType);
    setPage(1);
  }, [form]);

  const onReset = useCallback(() => {
    form.resetFields();
    setkeyType(0);
  }, [form]);

  return (
    <>
      <div
        style={{
          background: '#fff',
          padding: '25px',
          marginBottom: '20px',
          marginTop: '-24px',
        }}
      >
        <KeyButtons
          setBackupVisible={setBackupVisible}
          setbackupModalTitle={setbackupModalTitle}
          setKeyCreateVisible={setKeyCreateVisible}
          setKeyImportVisible={setKeyImportVisible}
          setGenRandomNumberVisible={setGenRandomNumberVisible}
        />
      </div>

      <BackupKeyModal
        title={backupModalTitle}
        visible={backupVisible}
        setVisible={setBackupVisible}
      />

      <KeyCreateModal visible={keyCreateVisible} setVisible={setKeyCreateVisible} />
      <KeyImportModal visible={keyImportVisible} setVisible={setKeyImportVisible} />

      <RandomNumberGenerator
        visible={genRandomNumberVisible}
        setVisible={setGenRandomNumberVisible}
      />

      <div
        className={styles.Table}
        style={{
          background: '#fff',
          padding: '25px',
          marginBottom: '25px',
          marginTop: '18px',
        }}
      >
        <SearchForm form={form} onSearch={onSearch} onReset={onReset} />
        <KeyTable
          keyTable={keyTable}
          total={total}
          page={page}
          pageSize={pageSize}
          setPage={setPage}
          setPageSize={setPageSize}
          keyType={keyType}
        />
      </div>
    </>
  );
};

export default KeyManagement;
